<template>
  <Modal title="增加"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="800"
         :closable="false"
         @on-visible-change="changeVisible"
         @on-ok="next">
    <Steps :current="current">
      <Step title="步骤1"></Step>
      <Step title="步骤2"></Step>
      <Step title="步骤3"></Step>
    </Steps>
    <StepA v-if="current===0" :init-form-data="formData.reportCode" @after-edit="editCode"></StepA>
    <StepB v-if="current===1" :init-form-data="formData.reportName" @after-edit="editName"></StepB>
    <StepC v-if="current>=2" :init-form-data="formData.reportType" @after-edit="editType"></StepC>
    <div slot="footer">
      <Button type="text" @click="cancel" :disabled="loading">取消</Button>
      <Button v-if="current>0" type="primary" @click="last" :disabled="loading">上一步</Button>
      <Button type="primary" :loading="loading" @click="next">{{btn}}</Button>
    </div>
  </Modal>
</template>

<script>
  import StepA from './stepA'
  import StepB from './stepB'
  import StepC from './stepC'

  export default {
    name: "step",
    components: {StepA, StepB, StepC},
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        modelView: false,
        formData: {
          reportCode: null,
          reportName: null,
          reportType: null,
          sql: null
        },
        current: 0,
        total: 3,
        loading: false
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
        if (newVal === true) {
          this.current = 0
        }
      }
    },
    computed: {
      btn() {
        if (this.current >= this.total - 1) {
          return '确定'
        } else {
          return '下一步'
        }
      }
    },
    methods: {
      changeVisible() {
        this.formData = {}
        this.$emit('update:visible', this.modelView)
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        this.loading = true
        let newData = JSON.parse(JSON.stringify(this.formData))
        setTimeout(() => {
          console.log(JSON.stringify(this.formData))
          this.loading = false
          this.modelView = false
          this.$Message.success({
            content:'新增成功'
          })
          this.$emit('on-ok', newData)
        }, 1000);
      },
      last() {
        this.current = this.current - 1
      },
      next() {
        this.current = this.current + 1
        if (this.current === this.total) {
          this.ok()
        }

      },
      editCode(val) {
        this.formData.reportCode = val
      },
      editName(val) {
        this.formData.reportName = val
      },
      editType(val) {
        this.formData.reportType = val
      }
    }
  }
</script>

<style scoped>

</style>
